<!--
 * @Descripttion:
 * @version:
 * @Author: 郭云龙
 * @Date: 2021-01-27 08:43:36
 * @LastEditors: 郭云龙
 * @LastEditTime: 2021-01-28 13:38:53
-->
<template>
  <div style="width: 100%;height: 100%">
    <el-tag style="width: 100%;margin-bottom: 2px;display: flex;align-items: center;justify-content: space-between">
      <div>
        <i class="el-icon-star-off"></i>总计：{{total}}&nbsp;条数据
      </div>
      <div>
        <h3 style="color: #20a0ff;cursor: pointer" @click="getserch">新增</h3>
      </div>
    </el-tag>
    <el-table v-loading='loading' :data="data" class="table" height="calc(100% - 30px)" stripe border highlight-current-row :header-cell-style="{background:'#ecebeb',color:'#606266'}">
      <el-table-column align="center" type="index" width="55px" label="序号"></el-table-column>
      <template v-for="(item,index) in column">
        <!--        操作按钮-->
        <el-table-column :label="item.label" :min-width="item.width" align="center" v-if="item.fun" :key='index'>
          <template slot-scope="scope">
            <span v-for="(i,index) in item.fun" class="funStyle" :class="i.type" @click="spanClick(scope.row,i.type)" :key='index' v-if="i.name==='修改'">{{i.name}}</span>
            <span v-for="(i,index) in item.fun" class="funStyle" :class="i.type" @click="spanClick(scope.row,i.type)" :key='index' v-if="(i.name==='删除')">{{i.name}}</span>
          </template>
        </el-table-column>
        <!--        正常数据-->
        <el-table-column :prop='item.prop'  :label="item.label" :min-width="item.width" align="center" v-else :show-overflow-tooltip="true" :key='index' />
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Usertable",
  props: {
    data: Array, //数据data
    column: Array,// 列数据
    loading: Boolean,//是否显示正在加载
    total: Number//总数
  },
  methods: {
    spanClick(row, type) {
      this.$emit('getRow', { row, type })
    },
    getserch(e) {
      this.$emit('newinsertUser', { e })
    },
  }
}
</script>

<style scoped lang="scss">
.funStyle {
  cursor: pointer;
  user-select: none;
  margin-left: 10px;
}
.delete {
  color: red;
}

.edit,
.agree,
.return,
.insert {
  color: dodgerblue;
}
</style>
